<template>
  <div>
    <Header></Header>
    <div class="article">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/index">职位详情</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
    </div>
    <div class="article">
      <div class="job-header-content ">
        <div class="job-header">
          <div class="job-name">
            {{postInfo.name}}
          </div>
          <div class="job-request">
            <p>
              <span class="salary">{{postInfo.salary}}</span>
              <span>/{{postInfo.education}}</span>
              <span>{{postInfo.experience}}/</span>
              <span>招聘人数：{{postInfo.count}}</span>
            </p>
            <ul class="position-label" style="margin-top:10px;">
              <li v-for="(item,index) in postInfo.tagList" class="job-label">{{item.name}}</li>
            </ul>
            <p class="publish_timepublish_time">职位浏览量：{{postInfo.hit}}</p>
          </div>
          <div class="position-content-r" style="max-width: 430px;">
            <div class="position-deal">
              <div class="collection">
                <a id="favor_tag" @click="saveFavorPost(postInfo.id)">收藏</a>
              </div>
              <div class="deliver">
                <a id="apply_tag" @click="sendPost(postInfo.id)">投递</a>
              </div>
            </div>
          </div>
        </div>
    </div>
    </div>
    <div class="article">
          <h4><b>一.公司介绍：</b></h4>
           <h5>公司名:{{postInfo.companyName}}</h5>
          <h5>公司描述:</h5>
        <mavon-editor :value="postInfo.companyDescription"
                      :toolbarsFlag="false"
                      :subfield="false"
                      :shortCut="false"
                      :autofocus="false"
                      :ishljs="true"
                      :boxShadow="false"
                      previewBackground="#FFFFFF"
                      defaultOpen="preview">
        </mavon-editor>
          <br/><h4><b>三.任职要求：</b></h4>
        <mavon-editor :value="postInfo.description"
                      :toolbarsFlag="false"
                      :subfield="false"
                      :shortCut="false"
                      :autofocus="false"
                      :ishljs="true"
                      :boxShadow="false"
                      previewBackground="#FFFFFF"
                      defaultOpen="preview">
        </mavon-editor>

          <br/>
          <br/><h4><b>四.工作地址</b></h4>
           {{postInfo.address}} <br/>
        <br/>

    </div>

    <Footer></Footer>
  </div>

</template>

<script>
import '@/assets/css/styles.css'
import Footer from "@/front/inc/Footer";
import Header from "@/front/inc/Header";

import mavonEditor from 'mavon-editor';
import Vue from 'vue';
import {getPostDetailById} from "@/api/post";
Vue.use(mavonEditor);
import {savePost} from "@/api/favor";
import {sendPost} from "@/api/send";

export default {
  name: "postdetail",
  components: {Footer,Header},
  data(){
    return {
      postInfo: {
        id:'1',
        name:'Java高级开发工程师',
        education:'大专',
        experience:'全职',
        salary:'10K-15K',
        description:`
        薪酬范围：8-12k，能力佳可谈。
              岗位职责：
              1.参与架构设计，负责业务之模块系统与数据库设计及业务功能开发；
              2.按照工作计划按时高质量完成系统模块开发任务；
              3.负责核心技术问题攻关，承担系统核心功能开发，保证系统稳定性。
              任职要求：
              1：具备扎实的Java基础知识
              2：熟练掌握Spring、Springboot、Hibernate/mybatis等开发框架
              3：对微服务架构有一定的了解并具备相关的项目经验
              4：熟练掌握mysql、mssql、oracle中的一种，具备一定的数据库优化经验
              5：具备较强的沟通、解决问题能力，能够在工作中独立解决问题
              6：对html、css、javascript有一定了解
              7：具备较强的上进心、责任心，对技术热衷
              【福利待遇】
              1、周末双休、五险一金、全勤奖、绩效奖金、年终奖金、员工培训、节日福利、生日福利、通讯补贴、集体活动等；
              2、上班时间：早上8:30 -12:00 下午13：30-18：00
              办公地址：绿地中央广场C2栋902
        `,
        count:'0-20人',
        address:'南宁',
        companyId:'55',
        hit:'432',
        companyName:'华资软件技术',
        companyDetail:`
        华资软件自80年代涉足电子政务领域，是华南地区最大的、业内领先的“智慧政府”解决方案提供商之一。公司掌握云计算、互联网+、大数据+、人工智能+等核心软件技术，形成了“智慧政府”的相关解决方案，全方位提供软件、运维、IT集成服务、设计咨询。

        华资软件现有员工千余人，总部设立在广州市，分别在北京市、深圳市、武汉市、福州市、长沙市、广西省、贵州省、山东省、海南省等地设立了研发基地和服务机构，形成了一支实战能力强、开拓敬业、堪称“行业专家”的专业队伍，搭建了覆盖全国各地的营销和服务网络，为客户提供便捷及专业的本地化支持与服务。

        随着人工智能时代的到来，华资软件密切关注用户的需求变化，紧跟行业政策和最新技术发展，提供智慧政府产品和服务。公司先后承担了公安、人社、医保、市场监管、民政、医疗卫生等政府行业的部、省、市级大型信息系统建设，参与包括广东省、深圳市、广西省、贵州省、山东省、海南省、北京市、武汉市、福州市、长沙市等全国各地互联网+、大数据+、人工智能+为核心的智慧新政务、数字政府建设，实现了全国性的战略布局。

        华资软件客户覆盖政府、公用事业、教育和企业等领域，通过30+年为客户创造价值,助力数字政府治理精准化、服务高效化、决策科学化，赢得了客户的广泛信任。



        我们的使命：

        创造优秀信息产品、提供优质服务、提升组织效能、促进社会进步

        我们的愿景：

        成为最值得信赖的信息应用平台与服务提供商

        我们的核心价值观：

        尊重信任、正直负责、求实创新、诚信服务



        荣誉资质：

        2020广东省政务服务创新解决方案奖
        2020广东省优秀软件产品和服务奖
        2020广东省电子信息行业科学技术奖
        2020广东省软件行业卓粤企业家奖
        2020广东省软件行业卓粤技术工匠奖
        2020广东省卓粤软件产品奖4个
        2020电子政务软件TOP10奖1个
        2020年中国软件行业优秀解决方案
      2020中国区域卓越IT服务商

        `,
        tagList:[
          {id:1,name:'Java'},
          {id:2,name:'Mybatis'},
          {id:3,name:'security'},
        ],
      },
    }
  },
  created() {
    this.getPostDetailById(this.$route.params.id);
  },
  methods:{
    //根据ID查询喜欢的职位信息
    getPostDetailById(id){
      getPostDetailById(id).then(res=>{
        this.postInfo = res.data;
      })

    },
    //收藏喜欢的职位
    saveFavorPost(id) {
      savePost(id).then(res => {
        this.$message({
          showClose: true,
          message: '收藏职位信息成功！',
          type: 'success',
          onClose: () => {
            this.findPostList()
          }
        })
      })
    },
    //岗位投递
    sendPost(id){
      sendPost(id).then(res=>{
        this.$message({
          showClose: true,
          message: '岗位投递成功！',
          type: 'success',
          onClose: () => {
            this.findPostList()
          }
        })
      })
    },
  }

}
</script>

<style scoped>
.job-header-content{
  background-color: #f2f5f4;
  padding: 30px 0 11px;
  width: 100%;
  min-width: 1024px;
}
.job-header{
  position: relative;
  width: 1024px;
  height: 174px;
  margin: 0 auto;
}
.job-name{
  position: relative;
  font-size: 36px;
  color: #333;
  line-height: 36px;
  margin-bottom: 15px;
}
.job-request{
  margin-top: 2px;
  font-size: 18px;
  color: #555;
}
.job-label{
  float: left;
  height: 22px;
  margin-right: 8px;
  padding: 0 10px;
  line-height: 22px;
  background-color: #fff;
  color: #70797b;
  font-size: 12px;
  border-radius: 10px;

}
.position-content-r{
  position: absolute;
  right: 0;
  top: 12px;
  max-width: 328px;
}
.position-label{
  padding-left: 0px !important;
  margin: 0;

  list-style: none;
}
.position-deal .collection{
  position: relative;
  float: right;
  color: #fff;
  background-color: #3992d6;
  margin-left: 40px;
}
.position-deal .collection a{

  padding: 12px 45px;
  border: 1px solid #3992d6;
  border-radius: 3px;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  background-color: #3992d6;
  color: #fff;
  cursor: pointer;

}
.position-deal .deliver{
  position: relative;
  float: right;
  color: #fff;
  background-color: #3992d6;
}
.position-deal .deliver a{

  padding: 12px 45px;
  border: 1px solid #3992d6;
  border-radius: 3px;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  background-color: #3992d6;
  color: #fff;
  cursor: pointer;
}
.job-header-content{
  background-color: #f2f5f4;
  padding: 30px 0 11px;
  width: 100%;
  min-width: 1024px;
}
</style>
